<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">←</view>
			<view class="nav-title">预约详情</view>
			<view class="nav-actions">···</view>
		</view>

		<!-- 核销码区域 -->
		<view class="qr-section">
			<view class="qr-code">
				<!-- 这里使用占位符，实际项目中应该使用真实的二维码图片 -->
				<image src="/static/image/yy.png" mode="aspectFit" class="qr-image"></image>
			</view>
			<view class="verification-code">
				<view class="code-label">核销码:</view>
				<view class="code-value">WE343235V</view>
			</view>
		</view>

		<!-- 维修信息 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-grid">
				<view class="info-item">
					<view class="info-label">维修单号:</view>
					<view class="info-value">3535252</view>
				</view>
				<view class="info-item">
					<view class="info-label">维修状态:</view>
					<view class="info-value status-processing">进行中</view>
				</view>
				<view class="info-item">
					<view class="info-label">车主姓名:</view>
					<view class="info-value">张</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系方式:</view>
					<view class="info-value">1993829282</view>
				</view>
				<view class="info-item">
					<view class="info-label">维修方式:</view>
					<view class="info-value">上门取车</view>
				</view>
				<view class="info-item">
					<view class="info-label">取车位置:</view>
					<view class="info-value">山阳区32号</view>
				</view>
				<view class="info-item">
					<view class="info-label">预约日期:</view>
					<view class="info-value">2022/11/10 11:00</view>
				</view>
				<view class="info-item">
					<view class="info-label">提交日期:</view>
					<view class="info-value">2022/11/08 12:34</view>
				</view>
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-grid">
				<view class="info-item">
					<view class="info-label">车辆类型:</view>
					<view class="info-value">大客车</view>
				</view>
				<view class="info-item">
					<view class="info-label">车牌号:</view>
					<view class="info-value">豫J45323</view>
				</view>
			</view>

			<!-- 整车照片 -->
			<view class="photo-section">
				<view class="photo-label">整车照片:</view>
				<view class="photo-preview">
					<image src="/static/image/yy.png" mode="aspectFill" class="car-photo"></image>
				</view>
			</view>

			<!-- 维修部位照片 -->
			<view class="photo-section">
				<view class="photo-label">维修部位照片:</view>
				<view class="parts-photos">
					<image src="/static/image/yy.png" mode="aspectFill" class="part-photo">
					</image>
					<image src="/static/image/yy.png" mode="aspectFill" class="part-photo">
					</image>
					<image src="/static/image/yy.png" mode="aspectFill" class="part-photo">
					</image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button" @click="cancelBooking">取消预约</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue';

const statusBarHeight = ref(0);

// 方法定义
	function goBack() {
		uni.navigateBack();
	}

	function cancelBooking() {
		// 显示取消确认弹窗
		uni.showModal({
			title: '取消预约',
			content: '确定要取消该预约吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '预约已取消',
						icon: 'success'
					});
					// 可以跳转到其他页面或刷新数据
				}
			}
		});
	}
onMounted(() => {
	// 获取状态栏高度，使用推荐的wx.getWindowInfo API
	try {
		const windowInfo = uni.getWindowInfo();
		statusBarHeight.value = windowInfo.statusBarHeight;
	} catch (error) {
		console.error('获取窗口信息失败:', error);
		statusBarHeight.value = 0;
	}
});
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.nav-bar {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #1E88E5;
		color: white;
		padding: 0 16px;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-back {
		font-size: 20px;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
	}

	.qr-section {
		background-color: white;
		padding: 20px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		border-radius: 15px;
	}

	.qr-code {
		margin-bottom: 20px;
	}

	.qr-image {
		width: 200px;
		height: 200px;
	}

	.verification-code {
		text-align: center;
	}

	.code-label {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.code-value {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		letter-spacing: 1px;
	}

	.info-section {
		background-color: white;
		padding: 16px;
		margin-bottom: 10px;
		margin: 10px;
		border-radius: 15px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 16px;
		padding-bottom: 8px;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 16px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.info-label {
		font-size: 13px;
		color: #666;
	}

	.info-value {
		font-size: 14px;
		color: #333;
		font-weight: 500;
	}

	.status-processing {
		color: #FF9800;
	}

	.photo-section {
		margin-bottom: 16px;
	}

	.photo-label {
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.photo-preview {
		margin-bottom: 10px;
	}

	.car-photo {
		width: 150px;
		height: 100px;
		border-radius: 8px;
	}

	.parts-photos {
		display: flex;
		gap: 10px;
	}

	.part-photo {
		width: 100px;
		height: 80px;
		border-radius: 8px;
	}

	.bottom-button {
		margin: 20px 16px;
		padding: 15px;
		background-color: #1E88E5;
		color: white;
		text-align: center;
		border-radius: 30px;
		font-size: 16px;
		font-weight: bold;
	}
</style>